<template>
  <view class="QRcodeLogin">
    <image class="img" :src="imgUrl"></image>
  </view>
</template>

<script setup lang="ts">
// 这里编写逻辑代码
import { nextTick, ref, watch } from 'vue'
import { loginKeyApi, loginImgApi, QRcodeApi } from '@/services/index'
import { useMusicStore } from '@/store/listMusic'

// const musicStore = useMusicStore().getUserStatus
const key = ref('')
const imgUrl = ref('')
const timer = ref(0)

const getKey = async () => {
  try{
    const res = await loginKeyApi()
    key.value = res.data.unikey
  } catch (e) {
    console.log(e)
  }
}

const getImg = async () => {
  try{
    const res = await loginImgApi(key.value)
    console.log(res)
    imgUrl.value = res.data.qrimg
  } catch (e) {
    console.log(e)
  }
}

const gieCode = async () => {
  try{
    const res = await QRcodeApi(key.value)
    console.log(res)
    if(res.code === 803){
      clearInterval(timer.value)
      // 调取登录状态接口
      // useMusicStore().getUserStatus()
      // if (useMusicStore().userStatusType) {
        
      // }
      uni.switchTab({url:'/pages/index/index'})
    }
  } catch (e) {
    console.log(e)
  }
}


getKey()
watch (key, 
  () => {
    getImg()
    timer.value = setInterval(() => {
      gieCode()
    },1000)
    
  }
)

</script>

<style scoped lang="scss">
.QRcodeLogin{
  display: flex;
  justify-content: center;
  align-items: center;
}
.img{
  width: 300px;
  height: 300px;
}
</style>